<template>
	<!-- <div class="antv-wrapper"> -->
	<AntVXSix v-model="data" @finish="finish" />
	<!-- </div> -->
</template>
<script>
import { Graph, Shape } from "@antv/x6";
// import { configNodePorts } from "@/utils/antvSetting";
import AntVXSix from "./antv.vue";
// 反显数据格式
const resData = [
	{
		shape: "edge",
		id: "390b4bc1-4945-464c-a34d-eeb14acba1a1",
		source: "c9ba8f28-9335-447a-a4c0-1dbe34afc815",
		target: "e78740b8-f27f-4f3d-b1d4-11e6e810c76a",
	},
	{
		shape: "edge",
		id: "4fa2ff4a-a78e-4f4c-a8fa-0b1c536cbe1b",
		source: "e78740b8-f27f-4f3d-b1d4-11e6e810c76a",
		target: "9e97d5af-ae22-47e0-bb9f-a0ebf8db0910",
	},
	{
		shape: "edge",
		id: "c0874682-8817-4797-b6e9-5022fd6238b3",
		zIndex: 0,
		source: "c9ba8f28-9335-447a-a4c0-1dbe34afc815",
		target: "9e97d5af-ae22-47e0-bb9f-a0ebf8db0910",
	},
	{
		position: { x: 170, y: 130 },
		size: { width: 100, height: 50 },
		attrs: {
			text: { text: "椭圆形" },
			body: { rx: 20, ry: 26, fill: "#fff", stroke: "#028222" },
			label: { text: "椭圆形", fontSize: 16, fill: "#000" },
		},
		visible: true,
		shape: "rect",
		id: "c9ba8f28-9335-447a-a4c0-1dbe34afc815",
		data: { type: "defaultOval" },
		ports: {
			items: [
				{ group: "top", id: "e49da871-6793-4a8e-909d-becd630de7cc" },
				{ group: "right", id: "9daae234-935b-4634-aae4-62fe6e1a763a" },
				{ group: "bottom", id: "4b5b6dd0-c31a-42bd-ae81-74b26f67b3eb" },
				{ group: "left", id: "1a7be646-1507-4122-94e0-0ad9d0ab0554" },
			],
		},
		zIndex: 1,
	},
	{
		position: { x: 590, y: 350 },
		size: { width: 180, height: 80 },
		attrs: {
			text: { text: "平行四边形" },
			body: {
				refPoints: "10,0 40,0 30,20 0,20",
				fill: "#7A0289",
				stroke: "#49007A",
			},
			label: { text: "平行四边形", fontSize: "16", fill: "#FFFFFF" },
		},
		visible: true,
		shape: "polygon",
		id: "9e97d5af-ae22-47e0-bb9f-a0ebf8db0910",
		data: { type: "defaultRhomboid" },
		ports: {
			items: [
				{ group: "top", id: "c6a92550-ceb3-411c-8c4c-7848aa064b76" },
				{ group: "right", id: "40ce97eb-f258-4b8c-b3bc-b798b4662b77" },
				{ group: "bottom", id: "a47a0d67-e30b-4149-91b7-527c47043f0a" },
				{ group: "left", id: "ef42ef10-d01d-49b1-95da-2f19189adf29" },
			],
		},
		zIndex: 2,
	},
	{
		position: { x: 940, y: 10 },
		size: { width: 80, height: 80 },
		attrs: {
			text: { text: "圆形" },
			body: { fill: "#CD0000", stroke: "#950000" },
			label: { text: "圆形", fontSize: 16, fill: "#FFFFFF" },
		},
		visible: true,
		shape: "circle",
		id: "e78740b8-f27f-4f3d-b1d4-11e6e810c76a",
		data: { type: "defaultCircle" },
		ports: {
			items: [
				{ group: "top", id: "11a5b89d-2e19-44db-ad6b-2f03983ea097" },
				{ group: "right", id: "7ae5d159-3823-4b7f-9e2b-994405071dc8" },
				{ group: "bottom", id: "358110af-4dd6-4806-8b24-46b2b34b2f7c" },
				{ group: "left", id: "122093c7-de48-435b-95aa-8ef9cf58a9ca" },
			],
		},
		zIndex: 3,
	},
];

export default {
	components: { AntVXSix },
	data() {
		return {
			graph: null,
			data: {
				// 节点
				nodes: [
					{
						id: "node1", // String，可选，节点的唯一标识
						left: 40, // Number，必选，节点位置的 x 值
						top: 40, // Number，必选，节点位置的 y 值
						width: 80, // Number，可选，节点大小的 width 值
						height: 40, // Number，可选，节点大小的 height 值
						label: "hello", // String，节点标签
					},
					{
						id: "node2",
						left: 160,
						top: 180,
						width: 80,
						height: 40,
						label: "world",
					},
					{
						id: "node3", // String，可选，节点的唯一标识
						left: 260, // Number，必选，节点位置的 x 值
						top: 290, // Number，必选，节点位置的 y 值
						width: 80, // Number，可选，节点大小的 width 值
						height: 40, // Number，可选，节点大小的 height 值
						label: "hello3", // String，节点标签
					},
					{
						id: "node4",
						left: 360,
						top: 380,
						width: 80,
						height: 40,
						label: "world4",
					},
				],
				// 边
				lineList: [
					{
						from: "node1", // String，必须，起始节点 id
						to: "node2", // String，必须，目标节点 id
					},
					{
						from: "node3", // String，必须，起始节点 id
						to: "node4", // String，必须，目标节点 id
					},
					{
						from: "node2", // String，必须，起始节点 id
						to: "node3", // String，必须，目标节点 id
					},
				],
			},
		};
	},
	created() {
		var d = [];
		this.data.lineList.map((i) => {
			// i.source = i.from; //起点或起始节点、连接桩信息。
			// i.target = i.to; //终点或终止节点、连接桩信息。
			i.shape = "edge"; //渲染边图形
			i.connector = { name: "normal" }; //简单连接器
			i.zIndex = 0; //节点/边在画布中的层级
			// 连接到节点上的连接桩
			i.source = {
				//连接起点
				cell: i.from,
				port: "a47a0d67-e30b-4149-91b7-527c47043f0a",
			};
			i.target = {
				//连接终点
				cell: i.to,
				port: "e49da871-6793-4a8e-909d-becd630de7cc",
			};
			d.push(i);
		});
		this.data.nodes.map((k) => {
			k.shape = "rect";
			k.position = {
				//节点位置
				x: k.left,
				y: k.top,
			};
			k.size = { width: 80, height: 80 }; //节点大小
			k.attrs = {
				//元素的默认属性键值对，通常用于定义那些不变的通用属性
				text: { text: k.name, fill: "#FFFFFF" }, // 指定 text 元素的样式
				body: { fill: "#CD0000", stroke: "#950000" }, // 指定 rect 元素的样式
				label: { text: k.label, fontSize: 16, fill: "#FFFFFF" }, // 指定 label 元素的样式
			};
			k.visible = true; //节点/边是否可见
			k.data = { type: "defaultSquare" }; //节点/边关联的业务数据
			k.zIndex = 3; //节点/边在画布中的层级
			k.ports = {
				// 连接桩
				items: [
					{ group: "top", id: "e49da871-6793-4a8e-909d-becd630de7cc" },
					{ group: "right" },
					{ group: "bottom", id: "a47a0d67-e30b-4149-91b7-527c47043f0a" },
					{ group: "left" },
				],
			};
			d.push(k);
		});
		console.log("d :>> ", d);
		this.data = d;
	},
	mounted() {},
	methods: {
		finish(value) {
			console.log("JSON.parse(value) :>> ", JSON.parse(value));
			this.data = JSON.parse(value);
		},
	},
};
</script>
<style lang="scss">
@keyframes ant-line {
	to {
		stroke-dashoffset: -1000;
	}
}
</style>
<style lang="scss" scoped="scoped">
.antv-wrapper {
	position: relative;
	height: 100vh;
	width: 100%;
}
</style>
